<template>
  <div class="webar no-mode-translate-wrapper">
    <transition name="no-mode-translate-fade">
        <yd-webar v-if="webar.show == 'chat'" key="chat">
            <yd-webar-item slot="top" top @click.native="openNav()">
                <div slot="icon">
                    <transition name="no-mode-translate-fade">
                        <div v-if="showHome" class="menuAvatar" key="avatar">
                            <img :src="avatar"/>
                        </div>
                        <div v-else class="menuAvatar" key="icon">
                            <yd-icon name="weixin" size=".8rem" color="#FF685D"></yd-icon>
                        </div>
                    </transition>
                </div>
            </yd-webar-item>
            <yd-webar-item placeholder="请发言" chat v-model="chatContent">
            </yd-webar-item>
            <yd-webar-item>
                <transition name="no-mode-translate-fade" slot="text">
                    <div v-if="chatContent" key="send">
                        <yd-button type="primary" @click.native="sendContent">
                            <yd-icon name="weixin" size=".28rem"></yd-icon> <span>发送</span>
                        </yd-button>
                    </div>
                    <div v-else key="room">
                        <yd-button type="primary" @click.native="sendContent">
                            <yd-icon name="type" size=".28rem"></yd-icon> <span>聊天室</span>
                        </yd-button>
                    </div>
                </transition>
            </yd-webar-item>
        </yd-webar>
        <yd-webar v-else-if="webar.show == 'remark'" key="remark">
            <yd-webar-item slot="top" top @click.native="openNav()">
                <div slot="icon">
                    <transition name="no-mode-translate-fade">
                        <div v-if="showHome" class="menuAvatar" key="avatar">
                            <img :src="avatar"/>
                        </div>
                        <div v-else class="menuAvatar" key="icon">
                            <yd-icon name="weixin" size=".8rem" color="#FF685D"></yd-icon>
                        </div>
                    </transition>
                </div>
            </yd-webar-item>
            <yd-webar-item placeholder="请评论" chat v-model="chatContent">
            </yd-webar-item>
            <yd-webar-item>
                <yd-button slot="text" type="primary" @click.native="sendRemark">
                    <yd-icon name="compose" size=".28rem"></yd-icon> <span>提交</span>
                </yd-button>
            </yd-webar-item>
        </yd-webar>
        <yd-webar v-else-if="webar.show == 'search'" key="search">
            <yd-webar-item slot="top" top @click.native="openNav()">
                <div slot="icon">
                    <transition name="no-mode-translate-fade">
                        <div v-if="showHome" class="menuAvatar" key="avatar">
                            <img :src="avatar"/>
                        </div>
                        <div v-else class="menuAvatar" key="icon">
                            <yd-icon name="weixin" size=".8rem" color="#FF685D"></yd-icon>
                        </div>
                    </transition>
                </div>
            </yd-webar-item>
            <yd-webar-item placeholder="请输入" chat v-model="chatContent">
            </yd-webar-item>
            <yd-webar-item>
                <yd-button slot="text" type="primary" @click.native="doneSearch">
                    <yd-icon name="search" size=".28rem"></yd-icon> <span>搜索</span>
                </yd-button>
            </yd-webar-item>
        </yd-webar>
        <yd-webar v-else-if="webar.show == 'selmonth'" key="selmonth">
            <yd-webar-item slot="top" top @click.native="openNav()">
                <div slot="icon">
                    <transition name="no-mode-translate-fade">
                        <div v-if="showHome" class="menuAvatar" key="avatar">
                            <img :src="avatar"/>
                        </div>
                        <div v-else class="menuAvatar" key="icon">
                            <yd-icon name="weixin" size=".8rem" color="#FF685D"></yd-icon>
                        </div>
                    </transition>
                </div>
            </yd-webar-item>
            <yd-webar-item title="最近一个月" @click.native="selectMonth(1)">
            </yd-webar-item>
            <yd-webar-item title="最近三个月" @click.native="selectMonth(3)">
            </yd-webar-item>
            <yd-webar-item title="最近六个月" @click.native="selectMonth(6)">
            </yd-webar-item>
        </yd-webar>
        <yd-webar v-else-if="webar.show == 'tabs'" key="tabs">
            <yd-webar-item slot="top" top @click.native="openNav()">
                <div slot="icon">
                    <transition name="no-mode-translate-fade">
                        <div v-if="showHome" class="menuAvatar" key="avatar">
                            <img :src="avatar"/>
                        </div>
                        <div v-else class="menuAvatar" key="icon">
                            <yd-icon name="weixin" size=".8rem" color="#FF685D"></yd-icon>
                        </div>
                    </transition>
                </div>
            </yd-webar-item>
            <yd-webar-item @click.native="navTo(webarTabLink(0))">
                <div slot="text" :class="navClass(webarTabLink(0))">
                    <yd-icon name="feedback" size=".38rem"></yd-icon> <span>{{ webarTabLabel(0) }}</span>
                </div>
            </yd-webar-item>
            <yd-webar-item @click.native="navTo(webarTabLink(1))">
                <div slot="text" :class="navClass(webarTabLink(1))">
                    <yd-icon name="type" size=".38rem"></yd-icon> <span>{{ webarTabLabel(1) }}</span>
                </div>
            </yd-webar-item>
            <yd-webar-item dot @click.native="navTo(webarTabLink(2))">
                <div slot="text" :class="navClass(webarTabLink(2))">
                    <yd-icon name="compose" size=".38rem"></yd-icon> <span>{{ webarTabLabel(2) }}</span>
                </div>
            </yd-webar-item>
        </yd-webar>
        <yd-webar v-else key="default">
            <yd-webar-item slot="top" top @click.native="openNav()">
                <div slot="icon">
                    <transition name="no-mode-translate-fade">
                        <div v-if="showHome" class="menuAvatar" key="avatar">
                            <img :src="avatar"/>
                        </div>
                        <div v-else class="menuAvatar" key="icon">
                            <yd-icon name="weixin" size=".8rem" color="#FF685D"></yd-icon>
                        </div>
                    </transition>
                </div>
            </yd-webar-item>
            <yd-webar-item :title="menuName(1)" :dot="menuNews(1)" @click.native="show1 = true">
            </yd-webar-item>
            <yd-webar-item :title="menuName(2)" :dot="menuNews(2)" @click.native="show2 = true">
            </yd-webar-item>
            <yd-webar-item :title="menuName(3)" :dot="menuNews(3)" @click.native="show3 = true">
            </yd-webar-item>
        </yd-webar>
    </transition>
    <yd-actionsheet :items="menuItems(1)" v-model="show1"></yd-actionsheet>
    <yd-actionsheet :items="menuItems(2)" v-model="show2"></yd-actionsheet>
    <yd-actionsheet :items="menuItems(3)" v-model="show3"></yd-actionsheet>
    <yd-actionsheet :items="chatRooms" v-model="chatMenu"></yd-actionsheet>
  </div>
</template>

<script>
module.exports = {
    name: 'wechat-menu',
    data () {
        return {
            show1: false,
            show2: false,
            show3: false,
            chatMenu: false,
            chatContent: undefined
        }
    },
    watch: {
        chatContent: 'sendSearch'
    },
    methods: {
        menuName (n) {
            return this.$store.getters.menuName(n)
        },
        menuNews (n) {
            return _.filter(this.$store.getters.menuItems(n), {news: true}).length>0
        },
        openNav () {
            this.chatContent = ''
            if(this.$store.getters.currentPath == '/') {
                this.$store.dispatch('getRooms', (data) => {
                    this.chatMenu = true;
                })
            }
            else
                this.$router.push('/')
        },
        menuItems (n) {
            return _.map(this.$store.getters.menuItems(n), (item) => {
                return {
                    label: item.label || item.name,
                    dot: item.news,
                    method: (() => {
                        this.$router.push({path: item.path, name: item.name})
                    }).bind(this)
                }
            })
        },
        sendContent () {
            if(this.chatContent) {
                if(this.webar.handleContent && this.webar.handleContent.call) {
                    this.webar.handleContent(this.chatContent)
                    this.chatContent = ''
                }
            } else {
                this.chatMenu = true
            }
        },
        sendRemark () {
            if(this.webar.handleContent && this.webar.handleContent.call) {
                if(this.chatContent) {
                    this.webar.handleContent(this.chatContent)
                    this.chatContent = ''
                }
            }
        },
        sendSearch () {
            if(this.webar.handleSearch && this.webar.handleSearch.call) {
                this.webar.handleSearch(this.chatContent)
            }
        },
        doneSearch () {
            if(this.webar.handleSearch && this.webar.handleSearch.call) {
                this.webar.handleSearch(this.chatContent)
                this.chatContent = ''
            }
        },
        selectMonth (n) {
            if(this.webar.handleSearch && this.webar.handleSearch.call) {
                const now = moment()
                const endMonth = now.add(1, 'months').format('YYYY-MM')
                const startMonth = now.subtract(n+1, 'months').format('YYYY-MM')
                this.webar.handleSearch(startMonth, endMonth)
            }
        },
        navTo (to) {
            this.$router.push(to)
        },
        navClass (to) {
            return this.$route.name == to.name ? 'nav-button-active' : 'nav-button'
        },
        webarTabLink (n) {
            return {name: this.webar.tabs[n].name}
        },
        webarTabLabel (n) {
            return this.webar.tabs[n].label
        }
    },
    computed: {
        showHome () {
            return this.$store.getters.currentPath == '/' ? false : true
        },
        avatar () {
            return this.$store.getters.userAvatar
        },
        chatRooms () {
            return _.map(this.$store.getters.chatRooms, (item) => {
                return {
                    label: item.label || item.room_name,
                    method: (() => {
                        this.$store.commit('chat', item)
                    }).bind(this)
                }
            })
        },
        webar () {
            return this.$store.getters.webar
        }
    }
}
</script>

<style scoped>

.menuAvatar {
    float: left;
    margin: .2rem;
    border-radius: .8rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    width: .8rem;
    height: .8rem;
}
.menuAvatar img{
    width: .8rem;
    height: .8rem;
    display: block;
    border-radius: .8rem;
    -webkit-animation: btn-pudding 1s linear;
    -moz-animation: btn-pudding 1s linear;
    animation: btn-pudding 1s linear;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
}
.no-mode-translate-wrapper {
  position: relative;
}
.no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active {
  transition: all .4s;
}
.no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
  opacity: 0;
}
.no-mode-translate-fade-enter {
  transform: translateY(1rem);
}
.no-mode-translate-fade-leave-active {
    position:absolute;
    bottom: 0;
  transform: translateY(1rem);
}
.yd-actionsheet-item {
    height: 1.38rem;
    line-height: 1.38rem;
    font-size: .38rem;
}
.webar .yd-btn {
    height: .8rem;
}
.webar .nav-button {
    font-size: .38rem;
    color: #000;
}
.webar .nav-button-active {
    font-size: .38rem;
    color: #000;
    text-shadow: -1px -1px 0 #fff, 1px 1px 0 #bbb, 1px 1px 0 #ddd;
}
</style>